<template>
  <div class="contents">
    <PanelTitle title="设备列表" />
    <div class="mt">
      <div class="tr">
        <div class="th" style="width: 40%;">设备名称</div>
        <div class="th" style="width: 30%;">设备类型</div>
        <div class="th" style="width: 30%;">设备状态</div>
      </div>

      <loopScroll class="scroll-table">
          <div class="tr" v-for="item in deviceStore.deviceList">
            <div class="td" style="width: 40%;">{{ item.name }}</div>
            <div class="td" style="width: 30%;">{{ deviceStore.getCategoryName(item.category)  }}</div>
            <div class="td" style="width: 30%;">{{ item.status ? '启用' : '禁用' }}</div>
          </div>
        </loopScroll>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import loopScroll from "@/components/loopScroll.vue";
import { useDeviceStore } from "@/stores/device";

const deviceStore = useDeviceStore()
const props = defineProps({
  base: Object
})
watch(() => props.base, () => {
  init()
})
const init = async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/device/list",
    method: "get",
    params: {
      baseId: props.base.id,
      year: new Date().getFullYear()
    },
  });
  deviceStore.deviceList = res.data
}
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
    padding: vh(20) vw(20);
    height: 17vh;
  }
}

.scroll-table {
  height: 15vh;
  overflow-y: hidden;
}
.tr{
  display: flex;
}
.th {
  color: #fff;
  background: linear-gradient(to bottom,
      rgba(50, 200, 167, 0.45),
      rgba(50, 200, 167, 0.05));
  font-size: vh(10);
  padding: vh(6) 0;
  text-align: center;
  box-sizing: border-box;
  border-left: vh(1) solid #2cd7bc;
  border-bottom: vh(1) solid #2cd7bc;
  border-top: vh(1) solid #2cd7bc;
}
.tr .th:last-child {
  border-right: vh(1) solid #2cd7bc;
}
.tr .td:last-child {
  border-right: vh(1) solid #2cd7bc;
}

.td {
  font-size: vh(9);
  color: #fff;
  border-left: vh(1) solid #2cd7bc;
  border-bottom: vh(1) solid #2cd7bc;
  padding: vh(4) 0;
  text-align: center;
  box-sizing: border-box;
}
</style>